// padding

@mixin paddingMixin($top, $right, $bottom, $left) {
  @if ($top) {
    padding-top: #{$top}px !important;
  }
  @if ($right) {
    padding-right: #{$right}px !important;
  }
  @if ($bottom) {
    padding-bottom: #{$bottom}px !important;
  }
  @if ($left) {
    padding-left: #{$left}px !important;
  }
}

@mixin paddingGroupMixin($padding) {
  .ui-padding-#{$padding},
  .ui-p-#{$padding} {
    @include paddingMixin($padding, $padding, $padding, $padding)
  }

  .ui-padding-top-#{$padding},
  .ui-pt-#{$padding} {
    @include paddingMixin($padding, null, null, null)
  }

  .ui-padding-right-#{$padding},
  .ui-pr-#{$padding} {
    @include paddingMixin(null, $padding, null, null)
  }

  .ui-padding-bottom-#{$padding},
  .ui-pb-#{$padding} {
    @include paddingMixin(null, null, $padding, null)
  }

  .ui-padding-left-#{$padding},
  .ui-pl-#{$padding} {
    @include paddingMixin(null, null, null, $padding)
  }

  .ui-padding-x-#{$padding},
  .ui-px-#{$padding} {
    @include paddingMixin(null, $padding, null, $padding)
  }

  .ui-padding-y-#{$padding},
  .ui-py-#{$padding} {
    @include paddingMixin($padding, null, $padding, null)
  }
}

@include paddingGroupMixin(0);
@include paddingGroupMixin(4);
@include paddingGroupMixin(8);
@include paddingGroupMixin(12);
@include paddingGroupMixin(16);
@include paddingGroupMixin(20);
@include paddingGroupMixin(24);
@include paddingGroupMixin(32);
